<script setup>
import { ElContainer, ElAside } from 'element-plus';
import router from "../router";

const toUser = () => {
  router.push('/user');
}
const toBuilding = () => {
  router.push('/building');
}
const toShop = () => {
  router.push('/shop');
}
const toAticle = () => {
  router.push('/article');
}
const toCenter = () => {
  router.push('/center');
}

</script>
<template>
  <div class="asider" style="text-align: center;">
    <el-container style="height: 40vh">
        <el-aside style="width:180px">
          <el-row class="tac">
            <el-col>
              <el-menu :default-active="$route.meta.id" class="el-menu-vertical-demo">
                <el-menu-item index="1">
                  <span @click="toUser">用户管理</span>
                </el-menu-item>
                <el-menu-item index="2">
                  <span @click="toBuilding">校内建筑信息管理</span>
                </el-menu-item>
                <el-menu-item index="3">
                  <span @click="toShop">校内外店铺信息管理</span>
                </el-menu-item>
                <el-menu-item index="4">
                  <span @click="toAticle">校园论坛管理</span>
                </el-menu-item>
                <el-menu-item index="5">
                  <span @click="toCenter">个人中心</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
    </el-container>
  </div>
</template>

<style>
.asider2{
  color: cornflowerblue;
}
</style>
